<template>
	<div id="lookall">
		<lookNav></lookNav>
		<div class="contentBox">
			<div class="contentHead">
				<span class="logo"></span>
				<span class="name">故宫文创</span>
				<span class="pay">等待买家付款</span>
			</div>
			<div class="allGoods">
				<ul class="allList">
					<li v-for="item in allList" :key="item.id">
						<img :src="item.imgpath" />
						<div class="right">
							<p class="name">{{item.name}}</p>
							<p class="colorOrweight">{{item.colorOrweight}}</p>
							<p class="aftersales">{{item.aftersales}}</p>
							<div class="price-count">
								<p class="price">{{item.price}}</p>
								<p class="count">{{item.count}}</p>
							</div>
						</div>
					</li>
				</ul>
				<div class="totalBox">
					<span class="count">共2件商品</span>
					<span class="discount">优惠 ¥ 0.00</span>
					<span class="total">合计</span>
					<span class="totalPrice">￥1326.00</span>
				</div>
				<div class="btnBox">
					<input type="button" value="查看物流" class="look" />
					<input type="button" value="确认收货" class="confirm" />
				</div>
			</div>
		</div>
		<div class="contentBox">
			<div class="contentHead">
				<span class="logo"></span>
				<span class="name">故宫文创</span>
				<span class="pay">等待买家付款</span>
			</div>
			<div class="allGoods">
				<ul class="allList">
					<li v-for="item in allList" :key="item.id">
						<img :src="item.imgpath" />
						<div class="right">
							<p class="name">{{item.name}}</p>
							<p class="colorOrweight">{{item.colorOrweight}}</p>
							<p class="aftersales">{{item.aftersales}}</p>
							<div class="price-count">
								<p class="price">{{item.price}}</p>
								<p class="count">{{item.count}}</p>
							</div>
						</div>
					</li>
				</ul>
				<div class="totalBox">
					<span class="count">共2件商品</span>
					<span class="discount">优惠 ¥ 0.00</span>
					<span class="total">合计</span>
					<span class="totalPrice">￥1326.00</span>
				</div>
				<div class="btnBox">
					<input type="button" value="查看物流" class="look" />
					<input type="button" value="确认收货" class="confirm" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import lookNav from '../../../view/nav/lookNav.vue'
	export default {
		name: "lookall",
		data() {
			return {
				allList: [{
						id: '1',
						imgpath: require('../../../assets/img/kouhong.png'),
						name: '故宫口红•枫叶红',
						colorOrweight: '枫叶红',
						aftersales: '7天无理由退换',
						price: '¥199.00',
						count: 'x1'
					},
					{
						id: '2',
						imgpath: require('../../../assets/img/kouhong.png'),
						name: '故宫口红•枫叶红',
						colorOrweight: '枫叶红',
						aftersales: '7天无理由退换',
						price: '¥199.00',
						count: 'x1'
					},
				]
			}
		},
		components: {
			lookNav: lookNav
		}

	}
</script>

<style scoped="scoped" lang="less">
	.icon {
		display: inline-block;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.bg {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	#lookall {
		background: #FFFCFC;
		.contentBox {
			background: #FFFFFF;
			margin-top: 0.16rem;
			padding-bottom: 0.12rem;
			.contentHead {
				display: flex;
				.logo {
					width: 0.18rem;
					height: 0.18rem;
					background-image: url(../../../assets/img/lookAll.png);
					.icon();
					margin: 0.13rem 0 0 0.2rem;
				}

				.name {
					font-size: 0.14rem;
					color: #333333;
					opacity: 1;
					margin: 0.12rem 0 0 0.12rem;
				}

				.pay {
					font-size: 0.12rem;
					color: #C30D23;
					opacity: 1;
					margin: 0.15rem 0 0 1.77rem;
				}
			}

			.allGoods {
				.allList {
					margin: 0.16rem 0 0 0.16rem;

					li {
						display: flex;
						margin-bottom: 0.12rem;

						img {
							width: 0.88rem;
							height: 0.88rem;
						}

						.right {
							display: flex;
							flex-direction: column;
							margin-left: 0.16rem;

							.name {
								font-size: 0.14rem;
								font-weight: bold;
								color: #333333;
								opacity: 1;
							}

							.colorOrweight {
								font-size: 0.12rem;
								color: #333333;
								opacity: 1;
								margin-top: 0.08rem;
							}

							.aftersales {
								display: inline-block;
								width: 0.8rem;
								height: 0.17rem;
								line-height: 0.17rem;
								font-size: 0.08rem;
								color: #C91328;
								text-align: center;
								opacity: 1;
								background: #FFE0E4;
								margin: 0.04rem 0;
							}

							.price-count {
								display: flex;

								.price {
									font-size: 0.14rem;
									font-weight: bold;
									color: #C30D23;
									opacity: 1;
								}

								.count {
									font-size: 0.14rem;
									color: #333333;
									opacity: 1;
									margin-left: 1.56rem;
								}
							}
						}
					}
				}

				.totalBox {
					display: flex;
					margin-top: 0.21rem;

					.count {
						font-size: 0.12rem;
						color: #333333;
						opacity: 1;
						margin-left: 1.14rem;
					}

					.discount {
						font-size: 0.12rem;
						color: #333333;
						opacity: 1;
						margin-left: 0.12rem;
					}

					.total {
						font-size: 0.12rem;
						color: #333333;
						opacity: 1;
						margin-left: 0.16rem;
					}

					.totalPrice {
						font-size: 0.16rem;
						font-weight: bold;
						color: #C30D23;
						opacity: 1;
						margin-left: 0.06rem;
						margin-top: -0.05rem;
					}
				}
			}

			.btnBox {
				display: flex;
				margin-top: 0.18rem;
				.look {
					border: none;
					width: 0.87rem;
					height: 0.28rem;
					background: #FFEBB9;
					opacity: 1;
					font-size: 0.14rem;
					color: #333333;
					opacity: 1;
					margin-left: 1.69rem;
				}

				.confirm {
					border: none;
					width: 0.87rem;
					height: 0.28rem;
					background: #C30D23;
					opacity: 1;
					font-size: 0.14rem;
					color: #FFFCFC;
					opacity: 1;
					margin-left: 0.12rem;
				}
			}
		}
		
	}
</style>
